<template>
  <el-dialog :visible.sync="dialogShow" :fullscreen="true" title="数据字典" :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="flex-column">
      <div class="flex justify-between">
        <h2>{{ model.dataName }}</h2>
        <p>
          <span>更新时间：{{ model.updateTime | dateFormat('YYYY-MM-DD') }}</span>
        </p>
      </div>
      <el-divider></el-divider>
      <ul class="flex flex-column">
        <li>
          <h3><i class="box1"></i> 数据定义</h3>
          <p v-html="model.dataDefinition"></p>
        </li>
        <li>
          <h3><i class="box2"></i> 计算公式</h3>
          <p v-html="model.formula"></p>
        </li>
        <li>
          <h3><i class="box3"></i> 关联数据</h3>
          <p v-html="model.relationDataKey"></p>
        </li>
        <li>
          <h3><i class="box4"></i> 适用范围</h3>
          <p v-html="model.applyRange"></p>
        </li>
        <li>
          <h3><i class="box5"></i> 示例</h3>
          <p v-html="model.example"></p>
        </li>
      </ul>
    </div>
  </el-dialog>
</template>

<script>
  import { detailDictionary } from '../../api/dataDic';
  export default {
    data() {
      return {
        model: {},
        dialogShow: false,
      };
    },
    methods: {
      async getDataDicDetail(primaryKey) {
        const res = await detailDictionary({ primaryKey: primaryKey });
        this.model = res;
        this.dialogShow = true;
        let filedLst = ['dataDefinition', 'formula', 'relationDataKey', 'applyRange', 'example'];
        filedLst.forEach(item => {
          if (this.model[item]) {
            this.model[item] = this.model[item].replace(/\n/g, '<br/>');
            this.model[item] = this.model[item].replace(/\t/g, '&emsp;');
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-divider {
    margin: 30px;
  }
  .flex-column {
    height: 100%;
    padding: 50px 310px 0;
    background-color: #ffffff;
    .justify-between {
      align-items: center;
    }
    .flex {
      width: 100%;
      padding: 0 50px;

      h2 {
        font-size: 30px;
        font-weight: 600;
        color: #333333;
        line-height: 42px;
      }

      p {
        font-size: 16px;
        color: #333333;
        line-height: 24px;

        span {
          font-size: 16px;
          color: #999;
        }
      }

      li {
        margin-bottom: 30px;
        h3 {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          color: #333333;
          line-height: 30px;
          margin-bottom: 10px;

          i {
            display: inline-block;
            width: 4px;
            height: 16px;
            margin-right: 15px;
          }

          .box1 {
            background: #29c37f;
          }
          .box2 {
            background: #3384fe;
          }
          .box3 {
            background: #f79100;
          }
          .box4 {
            background: #ff6159;
          }
          .box5 {
            background: #688bae;
          }
        }

        p {
          line-height: 30px;
        }

        span {
          font-size: 16px;
          color: #333333;
          line-height: 24px;
          font-weight: 800;
          cursor: pointer;
          &:hover {
            color: #f79100;
          }
        }
      }
    }
  }
</style>
